<template>
    <!-- <div class="my-upload"> -->
        <div class="click-upload">
            <el-button type="primary" icon="el-icon-upload" class="my-button" @click="dot">{{$t('opea.upload')}}</el-button>
            <input type="file" ref="file" id="file" @change="change" :accept="accept"/>
        </div>
    <!-- </div> -->
</template>
<script>
export default {
    props:['accept','handlerFn'],
    data(){
        return{
            file:{
                name:''
            },
        }
    },
    mounted(){
        console.log(this.accept)
        this.reset()
    },
    methods:{
        dot(){
            document.querySelector("#file").click()
        },
        change(){
            var file = this.$refs['file'].files[0];
            if(!file){
                this.file = {name:''}
            }else{
                // if(this.size){
                //     if(file.size > this.size){
                //         this.$message.warning('不允许上传超过限制大小的文件')
                //         return 
                //     }
                // }
                this.file = file  
            }
            this.$emit(this.handlerFn,this.file)
            this.$refs['file'].value = null;
        },
        reset(){
            this.file = {name:''}
        }
    }
}
</script>

<style scoped>
    .click-upload{
        display:inline-block;
        position: relative;
        top: -7px;
    }
    #file{
        width: 120px;
        height: 40px;
        opacity: 0;
        cursor: pointer;
    }
    .my-button{
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        z-index: 1;
    }


</style>
